﻿<!-- DataTables CSS -->
<link href="/Asset/SBAdmin/bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.css" rel="stylesheet">
<link href="/Asset/CB/colorbox.css" rel="stylesheet" />
<link href="/Asset/DatePicker/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
<div class="row">
    <div class="col-lg-12">
        <h1 class="page-header">日志列表</h1>
    </div>
    <!-- /.col-lg-12 -->
</div>
<div class="row">
    <div class="col-lg-12">
        <form class="form-inline">
            <div class="form-group">
                <label>日志类型:</label>
                <select id="logType" class="form-control input-sm">
                    <option value="">全部</option>
                    <option value="Msg">信息</option>
                    <option value="Debug">调试</option>
                    <option value="Exception">异常</option>
                </select>
            </div>
            <div class="form-group">
                <label>日志来源:</label>
                <select id="logFrom" class="form-control input-sm">
                    <option value="">全部</option>
                    <option value="Admin">管理</option>
                    <option value="Blog">博客</option>
                </select>
            </div>
            <div class="form-group">
                <label>开始时间:</label>
                <div class="input-group date form_date col-md-9" data-date="" data-date-format="yyyy MM dd" data-link-field="startTime" data-link-format="yyyy/mm/dd">
                    <input class="form-control" size="16" type="text" value="" readonly>
                    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                </div>
                <input type="hidden" id="startTime" value="" />
            </div>
            <div class="form-group">
                <label>结束时间:</label>
                <div class="input-group date form_date col-md-9" data-date="" data-date-format="yyyy MM dd" data-link-field="endTime" data-link-format="yyyy/mm/dd">
                    <input class="form-control" size="16" type="text" value="" readonly>
                    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                </div>
                <input type="hidden" id="endTime" value="" />
            </div>
            <button type="button" data-bind="click:Search" class="btn btn-default">查询</button>
            <button type="button" class="btn btn-default" data-bind="click:SRead">设为已读</button>
        </form>
        <br />
        <table class="table table-hover table-bordered">
            <thead>
                <tr>
                    <th><input type="checkbox" id="selectAll" value="" />全选</th>
                    <th>创建日期</th>
                    <th>受访页面</th>
                    <th>IP</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody data-bind="foreach:data">
                <tr>
                    <td><input type="checkbox" data-bind="value:ID" /></td>
                    <!-- ko if: HasRead=="1" -->
                    <td data-bind="text:CreateTime.replace('T','&nbsp;&nbsp;')"></td>
                    <!-- /ko -->
                    <!-- ko if: HasRead=="0" -->
                    <td> <div data-bind="text:CreateTime.replace('T','&nbsp;&nbsp;')" style="float:left"></div><font color="red">&nbsp;[新]</font> </td>
                    <!-- /ko -->
                    <td data-bind="text:URL"></td>
                    <td data-bind="text:IP"></td>
                    <td>
                        <button class="btn btn-primary btn-xs" data-bind="click:$parent.ViewLog">详情</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <!-- /.col-lg-12 -->
</div>
<div class="row" id="page"></div>
<script src="/Scripts/knockout-3.4.0rc.js"></script>
<script src="/Scripts/jquery.colorbox-min.js"></script>
<script src="/Asset/DatePicker/bootstrap-datetimepicker.min.js"></script>
<script src="/Asset/DatePicker/bootstrap-datetimepicker.zh-CN.js"></script>
<script type="text/javascript">
    (function ($) {
        function ViewModel() {
            var self = this;
            self.data = ko.observableArray([]);

            var startTime = $("#startTime"),
                endTime = $("#endTime"),
                logFrom = $("#logFrom"),
                logType = $("#logType");
            function GetList(pageIndex, itemsPerPage) {
                $.get("/Log/GetData?pageIndex=" + pageIndex + "&itemsPerPage=" + itemsPerPage + "&startTime=" + TranslateMonth(startTime.val()) + "&endTime=" + TranslateMonth(endTime.val()) + "&logFrom=" + logFrom.val() + "&logType=" + logType.val() + "&" + Math.random(), function (data) {
                    self.data(data.Data.Items);
                    $("#page").html(data.Data.Page);
                    BindPaginate();
                });
            }

            function TranslateMonth(str) {
                str.replace("一月", "1").replace("二月", 2).replace('三月', 3).replace('四月', 4).replace('五月', 5).replace('六月', 6).replace('七月', 7).replace('八月', 8).replace('九月', 9).replace('十月', 10).replace('十一月', 11).replace('十二月', 12);
                return str;
            }

            function BindPaginate() {
                $(".paginate_button").children().each(function () {
                    $(this).click(function () {
                        var $this = $(this);
                        var pageIndex = $this.text();
                        if ($this.attr("active") != undefined) return false;
                        GetList(pageIndex, 15);
                    });
                });
            }
            GetList(1, 15);

            self.Search = function () { GetList(1, 15) };

            //
            function CB(url) {
                $.colorbox({
                    href: url,
                    width: "750px",
                    height: "580px",
                    onClosed: function () { RefreshCurrPageData(); }
                });
            }

            $("#a_add").click(function () {
                var url = $(this).attr("href");
                CB(url);
                return false;
            })

            self.ViewLog = function () {
                var url = "/Log/ViewLog?id=" + this.ID + "&" + Math.random();
                CB(url);
                return false;
            }

            $("#selectAll").click(function () {
                $("input[type=checkbox]", "table").prop("checked", $("#selectAll").prop("checked"));
            })

            if ($("#tmpData").val().length > 0) {
                $("#opMsg").text($("#tmpData").val());
                $("#tmpData").val("");
            }

            function RefreshCurrPageData() {
                var page = $("li[class='paginate_button active']").children().text();
                GetList(page, 15);
            }

            function SetRead(ids) {
                $.get("/Log/SetReaded?ids=" + ids, function (res) {
                    if (res.IsSuccess) {
                        alert(res.Msg);
                        RefreshCurrPageData();
                        return false;
                    }
                });
                return false;
            }

            self.SRead = function () {
                var inputs = $("input[type=checkbox]", "table");
                var idsArr = [];
                for (var i = 0; i < inputs.length; i++) {
                    var curr = inputs.eq(i);
                    if (curr.prop("checked") == false) continue;
                    if (curr.val() == '') continue;
                    idsArr.push(curr.val());
                }
                var ids = idsArr.join(',');
                if (ids.length == 0) {
                    alert("请先选择");
                    return false;
                }
                SetRead(ids);
                return false;
            }

            $('.form_date').datetimepicker({
                language: 'zh-CN',
                weekStart: 1,
                todayBtn: 1,
                autoclose: 1,
                todayHighlight: 1,
                startView: 2,
                minView: 2,
                forceParse: 0
            });
        }
        ko.applyBindings(new ViewModel());
    }(jQuery));
</script>